<template>
  <!-- 堆叠图 + 折现图-->
  <div
    style="width: 1200px; height: 600px; margin: 100px auto"
    id="chart"
  ></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.chart();
  },
  methods: {
    // 条形统计图
    chart() {
      //初始化
      var myCharts = this.$echarts.init(document.getElementById("chart"));
      // 配置项
      var option = {
        animation: true, //动画效果，默认打开
        // animationDuration : 7000,//动画延时时间，
        animationDuration: function (arg) {
          //通过回调函数控制延时时间
          // 返回的是索引
          return 500 * arg; //后面的数据加载越久
        },
        animationEasing: "bounceOut", //缓动动画效果：linear：匀速，bounceOut：回弹效果...
        // animationThreshold: 8, //动画阈值，单种元素的数量大于这个值，动画不显示
        grid: {
          //  top: "10%",
          right: "3%",
          left: "10%",
          bottom: "20%",
        },
        //标题配置
        title: {
          text: "质量成本率分布趋势图", //标题，加‘\n’可换行
          textStyle: {
            //文本样式
            fontWeight: "800",
          },
          left: "center",
        },
        // 图例
        legend: {
          left: "center",
          top: "22",
        },
        // x轴
        xAxis: {
          type: "category", //类目轴
          data: [
            "FY19",
            "FY20",
            "FY21 YTD",
            "Q1",
            "Q2",
            "21-Jan",
            "21-Feb",
            "21-Mar",
            "21-Apr",
            "21-May",
            "21-Jun",
            "21-Jul",
            "21-Aug",
            "21-Sep",
            "21-Oct",
            "21-Nov",
            "21-Dec",
          ],
          axisLabel: {
            interval: 0,
          },
        },
        // y轴
        yAxis: {
          type: "value", //数值轴，对应series中的data
          position: "left", //y轴位置，left (默认)或right
        },
        //数据筛选，需要配合series使用，data中的每一项对应name值
        series: [
          {
            name: "预防成本率",
            type: "bar",
            stack: "预防成本率",
            data: [0.5,0.52,0.35,0.32,0.31,0.32,0.36,0.32,0.29,0.34,0.36],
            color: "rgb(19,199,101)",
            //显示数值
            label: {
              show: true, //设置显示
              formatter: function (arg) {
                //通过回调函数动态显示文字内容,percent:所占百分比
                return arg.value + "%";
              },
            },
            //柱状图样式配置
            itemStyle: {},
          },
          {
            name: "鉴定成本率",
            type: "bar",
            stack: "预防成本率",
            data: [0.40,0.40,0.33,0.30,0.25,0.28,0.18,0.28,0.18,0.18,0.18],
            color: "rgb(165,165,165)",
            label: {
              show: true, //设置显示
              formatter: function (arg) {
                //通过回调函数动态显示文字内容,percent:所占百分比
                return arg.value + "%";
              },
            },
          },
          {
            name: "内部损失率",
            type: "bar",
            stack: "预防成本率",
            data: [0.40,0.30,0.13,0.14,0.14,0.15,0.19,0.15,0.25,0.15,0.14],
            color: "rgb(68,114,196)",
            label: {
              show: true, //设置显示
              formatter: function (arg) {
                //通过回调函数动态显示文字内容,percent:所占百分比
                return arg.value + "%";
              },
            },
          },
          {
            name: "外部损失率",
            type: "bar",
            stack: "预防成本率",
            data: [0.34,0.08,0.11,0.15,0.23,0.26,0.16,0.18,0.10,0.30,0.25],
            color: "rgb(0,112,192)",
            label: {
              show: true, //设置显示
              formatter: function (arg) {
                //通过回调函数动态显示文字内容,percent:所占百分比
                return arg.value  + "%";
              },
            },
          },
          {
            name: "集团质量成本率",
            type: "line",
            data: [1.64,1.30,0.92,0.91,0.93,1.01,0.98,0.93,0.82,0.97,0.93],
            color: "rgb(0,112,192)",
            label: {
              show: true, //设置显示
              formatter: function (arg) {
                //通过回调函数动态显示文字内容,percent:所占百分比
                return arg.value  + "%";
              },
            },
          },
          {
            name: "集团质量成本率目标",
            type: "line",
            data: [1.45,1.34,1.28,1.28,1.28,1.28,1.28,1.28,1.28,1.28,1.28,1.28,1.28,1.28,1.28,1.28,1.28],
            color: "rgb(0,112,192)",
            label: {
              show: true, //设置显示
              formatter: function (arg) {
                //通过回调函数动态显示文字内容,percent:所占百分比
                return arg.value  + "%";
              },
            },
          },
        ],
        // 提示
        tooltip: {
          trigger: "item",
          showContent: true,
          //   trigger: "item", //触发类型：放在图上
          //   trigger: "axis", //触发类型：放在坐标轴上
          //   triggerOn: "mouseover", //触发方式：click：点击，mouseover：鼠标移入(默认)
          formatter: function (arg) {
            //提示文字也可以是个回调函数
            // console.log(arg);
            // return arg[0].name + ":" + arg[0].data;
            return arg.seriesName + ":" + arg.name + ":" + arg.value;
          },
        },
      };
      myCharts.setOption(option);
    },
  },
};
</script>

<style>
</style>